<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/jQuery_class_stu/jquery.js">

</script>

<script type="text/javascript">
function selectorTest(){
	//jQuery("selector")
	//css("css프라퍼티","값") - jQuery객체가 가진 Node객체들에 css 스타일을 적용
	//jQuery("div").css("border-style","solid");//모든 div 다가져옴,  div{border-style:solid;} 
	//div - 모든 div노드를 조회 , div:first - 조회한 모든 노드들 중 첫번째
		$("div:first").css("border-style","dotted").css("border-color","blue").css("width","300px");//메소드체인
	//마지막 div노드 조회
		$("div:last").css("border","1px solid green").css("background-color","pink");
	//div 자손중 ul의 손중 li
		$("div ul li").css("color", "green");
		$("div>ul li").css("color", "green"); // >있으면 위에것만 초록
	//모든 li
		//$("li").css("text-decoration","underline");
	//모든 li중 처음/마지막 자식 노드
		//$("li:last-child").css("text-decoration","underline");
	//모든 li중 n번째 자식 
		//$("li:nth-child(3)").css("text-decoration","underline");
	//모든 li중 짝수번째 자식
		$("li:nth-child(even)").css("text-decoration","underline");
	//링크 밑줄 없애기
		$("a").css("text-decoration","none");
}
</script>
</head>
<body>
<button onClick="selectorTest();"> 클릭 </button>
<div id="title">
	우리커피를 찾아 주셔서 감사합니다.
</div>
<!-- div안에 ul -->
<div>
	커피 메뉴
	<ul>
		<li>아메리카노</li>
		<li>카페라떼</li>
		<li>카푸치노</li>
		<li>카라멜 모카</li>
		<li>카라멜 마키아토</li>
	</ul>
</div>
<br>
<!-- <div>-<b>-<ul> -->
<div>
	<p>
		비 커피 메뉴
	</p>
	<b>
		<ul>
			<li>녹차</li>
			<li>홍차</li>
			<li>우롱차</li>
			<li>국화차</li>		 
		</ul>
	</b>
</div>
<p id="desc">
	tel : 02-111-2222, 주소 : 서울
</p>
링크<br>
<a href="#">커피빈</a>
<a href="#">스타벅스</a>
<a href="#">카페베네</a>
<a href="#">자바 커피</a>


</body>
</html>




